<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <meta name="importmap-type" content="systemjs-importmap">
    <script type="systemjs-importmap">
        {
          "imports": {
        <% Object.keys(apps).forEach(k=>{ %>
           "<%= k %>":"<%= apps[k].resourceEntryUrl %>",
        <% }) %>
         "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js",
          "vue": "https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js",
           "vue-router": "https://cdn.jsdelivr.net/npm/vue-router@3.0.7/dist/vue-router.min.js"
        }
    }
    </script>
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js"
          as="script" crossorigin="anonymous"/>
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js" as="script" crossorigin="anonymous"/>
    <script src="https://unpkg.com/import-map-overrides@1.7.2/dist/import-map-overrides.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/system.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/amd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/named-exports.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/named-register.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/use-default.min.js"></script>
</head>
<body>
<script>
    (function () {

        var configs =<%- JSON.stringify(apps) %>
            Promise.all([
                System.import('single-spa'),
                System.import('vue'),
                System.import('vue-router'),
            ]).then((res) => {
                var singleSpa = res[0];
                var Vue = res[1];
                var VueRouter = res[2];
                // var configs = res[3].default;
                Vue.use(VueRouter);
                Object.keys(configs).forEach(async k => {
                    var project = configs[k]
                    singleSpa.registerApplication(k, async () => {
                        project.manifest && await System.import(project.manifest)
                        if (project.scriptList.length > 0) {
                            await Promise.all(project.scriptList.map(i => {
                                return System.import(i)
                            }))
                        }
                        if (project.cssList.length > 0) {
                            await Promise.all(project.cssList.map(i => {
                                return System.import(i).then(function (module) {
                                    const styleSheet = module.default; // A CSSStyleSheet object
                                    document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet]; // now your css is available to be used.
                                });
                            }))
                        }
                        return System.import(k)
                    }, (location) => {
                        return project.location ? true : location.pathname.startsWith(`/${k}`);
                    });
                })
                singleSpa.start();
            })
    })()
</script>
<import-map-overrides-full show-when-local-storage="overrides-ui"></import-map-overrides-full>
</body>
</html>